<template>
  <div class="newsinfo">
    <!-- 新闻头部 -->
    <header class="newsinfo-header">
      <h2 class="news-title">{{info.title}}</h2>
      <p class="mui-ellipsis">
        <span>发表时间：{{ info.add_time | date }}</span>
        <span>点击次数：{{ info.click }}次</span>
      </p>
    </header>

    <!-- 新闻内容区域 -->
    <!-- 注意：通过 v-html 指令动态生成的内容，不管页面中的内容，scope对其无效 -->
    <div class="content" v-html="info.content">
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getNewsInfo()
  },

  data() {
    return {
      info: {}
    }
  },

  methods: {
    getNewsInfo() {
      // 使用 ES6中的字符串模板得到字符串
      // ${} 在字符串模板中表示引用参数
      var url = `api/getnew/${this.$route.params.id}`
      this.$http.get(url)
        .then(resp => {
          var data = resp.data

          if(data.status === 0) {
            // 注意：接口返回数据的格式，不管是列表还是对象，返回的都是：数组
            this.info = data.message[0]
          }
        })
    }
  }
}
</script>

<style lang="scss">
  .newsinfo {
    .newsinfo-header {
      padding: 5px;
    }

    .content {
      border-top: 1px solid #ccc;
      padding: 10px 5px 0;

      img {
        // 解决 图片 太宽，设置图片宽度以屏幕宽度为准
        width: 100%;
      }
    }

    .news-title {
      font-size: 18px;
    }
    .mui-ellipsis {
      color: #26a2ff;
      margin: 10px 0 0 0;

      display: flex;
      justify-content: space-between;
    }
  }
</style>
